import React, {Component} from 'react'
import {
    View,
    Text,
    ListView,
    Button,
    StyleSheet,
    Image,
    RefreshControl
} from 'react-native'

var data = {
    "result": [
        {
            "name": "xiaoluo",
            "age": "26",
            "email": "123123@qq.com",
            "number": "18823123123",
        },
        {
            "name": "xiaoluo",
            "age": "26",
            "email": "123123@qq.com",
            "number": "18823123123",
        },
        {
            "name": "xiaoluo",
            "age": "26",
            "email": "123123@qq.com",
            "number": "18823123123",
        },
        {
            "name": "xiaoluo",
            "age": "26",
            "email": "123123@qq.com",
            "number": "18823123123",
        },
        {
            "name": "xiaoluo",
            "age": "26",
            "email": "123123@qq.com",
            "number": "18823123123",
        },
        {
            "name": "xiaoluo",
            "age": "26",
            "email": "123123@qq.com",
            "number": "18823123123",
        },
        {
            "name": "xiaoluo",
            "age": "26",
            "email": "123123@qq.com",
            "number": "18823123123",
        },
        {
            "name": "xiaoluo",
            "age": "26",
            "email": "123123@qq.com",
            "number": "18823123123",
        },
    ]
}

export default class ListViewDemo extends Component {
    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows(data.result),
            isLoading: true
        }
        this.onLoad()

    }

    renderRow(item) {
        return (
            <View>
                <View style={styles.container}>
                    <Text style={styles.text}> {item.email}</Text>
                    <Text style={styles.text}> {item.number}</Text>
                    <Text style={styles.text}> {item.name}</Text>
                    <Text style={styles.text}> {item.age}</Text>
                </View>

            </View>
        )
    }

    renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
        return (
            <View style={styles.line}></View>
        )
    }

    renderFooter() {
        return (<View style={styles.image} Image source={{uri: ''}}></View>)
    }

    onLoad() {
        setTimeout(()=>{
            this.setState({
                isLoading:false
            })
        },2000)
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <Text style={styles.text}>
                    listview demo
                </Text>

                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={(item) => this.renderRow(item)}
                    renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
                    renderFooter={() => this.renderFooter()}
                    refreshControl={<RefreshControl
                        refreshing={this.state.isLoading}
                        onRefresh={() => {
                            this.onLoad();
                        }}
                    />}
                />

            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        // flexDirection: 'row',
        // justifyContent:'space-around',
        justifyContent: 'space-between',
        backgroundColor: 'white',
        margin: 5,
        borderWidth: 1,
        borderColor: 'red',
        borderRadius: 5
    },
    text: {
        fontSize: 15,
        color: 'black',
        textAlign: 'center',
        backgroundColor: 'gray',
        margin: 5,
    },
    line: {
        margin: 5,
        height: 2,
        backgroundColor: 'black'
    },
    image: {
        width: 400,
        height: 100,
    }
})